<div id="newUserPage" data-role="page" class="page type-interior">
    <div>
        <div class="content-primary">
            <form class="newUserProfileForm">
                <div class="verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">${ButtonAddUser}</h2>
                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
                    </div>

                    <div class="inputContainer">
                        <input is="emby-input" id="txtUsername" required type="text" label="${LabelName}" />
                    </div>

                    <div class="inputContainer">
                        <input is="emby-input" id="txtPassword" type="password" label="${LabelPassword}" />
                    </div>
                </div>

                <div class="folderAccessContainer verticalSection">
                    <h2 class="sectionTitle">${HeaderLibraryAccess}</h2>
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
                            <span>${OptionEnableAccessToAllLibraries}</span>
                        </label>
                        <div class="fieldDescription checkboxFieldDescription">${LibraryAccessHelp}</div>
                    </div>
                    <div class="folderAccessListContainer">
                        <div class="folderAccess">
                        </div>
                    </div>
                </div>

                <div class="channelAccessContainer verticalSection verticalSection-extrabottompadding" style="display:none;">
                    <h2 class="sectionTitle">${HeaderChannelAccess}</h2>
                    <div class="checkboxContainer checkboxContainer-withDescription">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
                            <span>${OptionEnableAccessToAllChannels}</span>
                        </label>
                        <div class="fieldDescription checkboxFieldDescription">${ChannelAccessHelp}</div>
                    </div>
                    <div class="channelAccessListContainer">
                        <div class="channelAccess">
                        </div>
                    </div>
                </div>

                <div>
                    <button is="emby-button" type="submit" class="raised button-submit block">
                        <span>${Save}</span>
                    </button>

                    <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
                        <span>${ButtonCancel}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
